<template>
  <div class="box">
    <div class="header">
      <span class="xuanze"><span><van-icon name="arrow-left" @click="$router.push('/home')" class="jt" /></span><span
          class="city">选择城市</span></span>
      <span>
        <nav></nav>
        <p>
          当前定位：{{ city }}
          <span style="float: right; color: #037afd;margin-right: 20px;font-size: 35px;"><van-icon name="aim"
              style="margin-right: 5px" /> 刷新</span>
        </p>
        <RouterView />
      </span>
    </div>
    <div class="main">

      <div class="left">
        <ul class="leftData">
          <li v-for="(item, index) in addressList" :key="index" @click="handleClick(item, index)"
            style="padding-left: 5px" :class="index == active ? 'bg' : ''">
            {{ item.province }}
          </li>
        </ul>
      </div>

      <div class="right">
        <ul class="leftData">
          <li v-for="(item, index) in citylist" :key="index" @click="headerCity(item, index)"
            :class="index == cactive ? 'cbg' : ''">
            {{ item }}
          </li>
        </ul>
      </div>

    </div>
  </div>
</template>
<script setup lang="ts">
// import router from '@/router';
import { onMounted, ref } from 'vue'
import { RouterLink, RouterView } from 'vue-router'
import axios from 'axios'
import router from '@/router'
// import axios from 'axios'
const addressList = ref<any[]>([])
const citylist = ref<any[]>([])
const active = ref(0)
const city = ref('')
const cactive = ref(0)
axios
  .get('https://restapi.amap.com/v3/ip', {
    params: {
      key: '72f496c53438722cf9f55f14bc6c3c0b',
    },
  })
  .then(({ data }) => {
    console.log(data)
    city.value = data.city
    // 首页IP定位
    localStorage.setItem('city', data.city)
  })
const handleClick = (item, index) => {
  citylist.value = item.cities
  active.value = index
}

const getAddressList = async () => {
  await axios.get('/api/city').then((res) => {
    console.log(res.data.data)
    addressList.value = res.data.data
  })
  citylist.value = addressList.value[0].cities

}

onMounted(() => {
  getAddressList()
})
// 首页定位
const headerCity = (data, index) => {
  console.log(data);
  localStorage.setItem('city', data)

  cactive.value = index
  setTimeout(() => {
    router.push({ path: '/home' })
  }, 300);
}
</script>

<style lang="scss" scoped>
.box {
  width: 750px;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.header {
  height: 100px;
  background-color: #fff;

  .xuanze {
    height: 50px;
    font-size: 30px;
  }

  .jt {
    margin-left: 10px;
  }

  .city {
    margin-left: 35%;
    font-weight: 800;
  }

  p {
    margin-top: 10px;
    margin-left: 20px;
    font-size: 25px;
  }
}

.main {
  flex: 1;
  display: flex;
  overflow: hidden;

  .left {
    flex: 1;

    li {
      height: 100px;
      line-height: 100px;

      font-size: 25px;
    }

    overflow: auto;
    background: #f6f6f6;
  }

  .right {
    flex: 2;

    li {
      height: 100px;
      line-height: 100px;
      margin-left: 20px;
      font-size: 25px;
    }

    overflow: auto;
    background: #ffffff;
  }
}

.bg {
  background: #fff;
}

.bg::before {
  content: '';
  padding-right: 30px;
  border-left: 7px solid blue;
  height: 10px;
  width: 10px;
}

.cbg {
  background: #eee;
}

// .tabIndex {
//   flex: 1;
//   height: 100%;
//   display: flex;
//   .left {
//     width: 25%;
//     line-height: 50px;
//     font-size: 30px;
//     background-color: #eee;
//     height: 100%;
//   }
//   .right {
//     flex: 1;
//     height: 100%;
//     font-size: 30px;
//     line-height: 50px;

//   }
// }</style>
